<template>
	<view class="body">
		<view class="father">
			<view class="father-top">
				父级:
			</view>
			<view class="father-bottom">
				<u-form-item prop="userInfo.sex" borderBottom @click="showSex = true;">
					<u--input v-model="father" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择父级" @close="showSex = false" @select="sexSelect">
			</u-action-sheet>
		</view>

		<view class="name">
			<view class="name-top">
				名称:
			</view>
			<view class="name-bottom">
				<u--input placeholder="请输入内容" border="surround" v-model="name" @change="change"></u--input>
			</view>
		</view>

		<view class="purview">
			<view class="purview-top">
				权限:
			</view>
			<view class="purview-bottom">
				<view class="bottom-top">
					<checkbox-group>
						<label>
							<checkbox :checked="seletedAll" @tap="_seletedAll">全部选中</checkbox>
						</label>
						<label>
							<checkbox value="cb" />展开全部
						</label>
					</checkbox-group>
				</view>
				<view class="bottom-content">
					<u-collapse @change="change" @close="close" @open="open">
						<u-collapse-item title="控制台" name="Docs guide">
							<checkbox-group @change="seletedStatus" checked>
								<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
									:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
							</checkbox-group>
						</u-collapse-item>
						<u-collapse-item title="常规管理" name="Variety components">
							<view class="" style="height: 280px;">
								<u-collapse @change="change" @close="close" @open="open">
									<u-collapse-item title="控制台" name="Docs guide">
										<checkbox-group @change="seletedStatus" checked>
											<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
												:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
										</checkbox-group>
									</u-collapse-item>
									<u-collapse-item title="分类管理" name="Numerous tools" size="30">
										<checkbox-group @change="seletedStatus" checked>
											<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
												:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
										</checkbox-group>
									</u-collapse-item>
									<u-collapse-item title="分类管理" name="Numerous tools">
										<checkbox-group @change="seletedStatus" checked>
											<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
												:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
										</checkbox-group>
									</u-collapse-item>
								</u-collapse>
							</view>
						</u-collapse-item>
						<u-collapse-item title="分类管理" name="Numerous tools">
							<checkbox-group @change="seletedStatus" checked>
								<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
									:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
							</checkbox-group>
						</u-collapse-item>
						<u-collapse-item title="权限管理" name="Numerous tools">
							<checkbox-group @change="seletedStatus" checked>
								<checkbox :value="item.value" v-for="(item, index) in items" :key="index"
									:checked="checkList.includes(String(item.value))">{{ item.name }}</checkbox>
							</checkbox-group>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	created() {

		this.timer = setInterval(() => {

			let a = this.$u.count.check()
			console.log(a)

		}, 15000);

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			father: '超级管理组',
			name: '二级管理组',
			showSex: false,
			actions: [
				{
					name: '超级管理组',
				},
				{
					name: '女',
				},
			],
			seletedAll: false,
			items: [{
				value: 'USA',
				name: '美国'
			},
			{
				value: 'CHN',
				name: {
					value: '123',
					name: '中国'
				},
			},
			{
				value: 'BRA',
				name: '巴西'
			},
			{
				value: 'JPN',
				name: '日本'
			}
			],
			checkList: [], //选中值
		}
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
		change(e) {
			console.log('change', e);
		},
		open(e) {
			console.log('open', e)
		},
		close(e) {
			console.log('close', e)
		},
		seletedStatus(e) {
			this.checkList = e.detail.value
			if (this.checkList.length === this.items.length) {
				this.seletedAll = true
			} else if (this.checkList.length != this.items.length) {
				this.seletedAll = false
			}
		},
		_seletedAll() {
			if (!this.seletedAll) {
				this.seletedAll = true
				this.items.map(item => {
					this.checkList.push(item.value)
				})
				console.log(this.checkList)
				console.log('true')
			} else {
				this.seletedAll = false
				this.checkList = []
				console.log('false')
			}
		}
	}
}
</script>

<style scoped lang="scss">
.body {
	padding: 5%;
}
</style>
